<template>
  <div class="text-center player-container q-mx-xs">
    <div :id="ref" />
  </div>
</template>

<script>
// const CyberPlayer = () => import('../statics/cyberplayer/cyberplayer.js')
const CyberPlayer = window.cyberplayer

import { dom } from 'quasar'
const { height, width } = dom

export default {
  name: 'Player',

  props: {
    url: {
      type: String,
      required: true
    },

    isMainScreen: {
      type: Boolean,
      default: false
    },

    playerState: {
      type: String,
      default: 'normal'
    }
  },

  data: () => ({
    ref: `player-container-${Math.ceil(Math.random(0, 1) * 100)}`,
    player: null,
    player1: null,
    playerConfig: {
      flashplayer: 'http://cdn.bdstatic.com/jwplayer/latest/cyberplayer.flash.swf',
      autostart: true,
      stretching: 'uniform',
      volume: 100,
      controls: false,
      rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
      },
      ak: '28c4f4cf125a461d81c76fa96d8b1422' // 公有云平台注册即可获得accessKey
    },
    formUrl: '' // #TODO: lanbin暂时用来存oldVal，以后要去掉
  }),

  mounted () {},

  watch: {
    url: {
      handler (val, oldVal) {
        if (val !== oldVal) setTimeout(this.setupPlayer, 1000)
      },
      immediate: true
    },

    playerState: {
      handler () {
        if (!this.isMainScreen) {
          setTimeout(this.refreshPlayerState, 1000)
        }
      },
      immediate: true
    }
  },

  methods: {
    async setupPlayer () {
      if (this.formUrl === this.url) return
      this.playerConfig.file = this.url
      const playerHeight = this.isMainScreen ? height(this.$el.parentElement) - 80 : height(this.$el.parentElement) / 3 - 10
      const playerWidth = this.isMainScreen ? width(this.$el.parentElement) - 40 : width(this.$el.parentElement) / 3 - 15
      const volume = this.isMainScreen ? 100 : 0
      this.playerConfig = {...this.playerConfig, file: this.url, height: playerHeight, width: playerWidth, volume}
      this.player = this.player ? await this.player.setup(this.playerConfig) : await CyberPlayer(this.ref).setup(this.playerConfig)
      this.formUrl = this.url
      if (!this.isMainScreen) {
        this.player.on('displayClick', () => {
          console.log(this)
          this.$emit('playerClick', this.url)
        })
      }
    },

    refreshPlayerState () {
      const targetElement = document.querySelector(`#${this.ref} div.jw-media`)
      console.log('TCL: refreshPlayerState -> targetElement', targetElement)
      if (!targetElement) return
      if (this.playerState === 'normal') {
        this.removeClassesInTarget(targetElement, ['warning-state', 'alarm-state'])
      }
      if (this.playerState === 'warning') {
        this.addClassesInTarget(targetElement, ['warning-state'])
        this.removeClassesInTarget(targetElement, ['alarm-state'])
      }
      if (this.playerState === 'alarm') {
        this.removeClassesInTarget(targetElement, ['warning-state'])
        this.addClassesInTarget(targetElement, ['alarm-state'])
      }
    },

    addClassesInTarget (target, classes) {
      classes.forEach(className => {
        target.classList.add(className)
      })
    },

    removeClassesInTarget (target, classes) {
      classes.forEach(className => {
        target.classList.remove(className)
      })
    },

    sendToMainScreenOrPause () {
    }
  }

  // beforeDestroy () {
  //   this.player.remove()
  // },

  // destroyed () {
  //   this.$off()
  //   this.$destroy()
  // }
}
</script>

<style lang="stylus">
@import '~variables'
.player-container {
  .jwplayer {
    text-align: center !important
  }
}

.warning-state {
  border: 1px solid $warning;
}

.alarm-state {
  border: 1px solid $negative;
}
</style>
